<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>我的</title>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/Api/css/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/Api/css/style.css"/>
    <style>

        * {
            margin: 0;
            padding: 0;
        }

        a {
            -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
            text-decoration: none;
            outline: 0;
        }

        /*头部*/
        .table_body {
            width: 100%;
            position: absolute;
            height: 100%;
            background-color: #f1f1f1;
        }

        .hide {
            height: 2rem;
            background-color: #c82226;
            text-align: center;
            line-height: 2rem;
            font-size: 1rem;
            color: white;
        }

        .hide a {
            display: line-block;
            width: 2rem;
            color: white;
            float: right;
            margin-right: .5rem
        }

        .hide .tab_ls {
            width: 9%;
            height: 100%;
            display: inline-block;
            text-decoration: none;
            outline: none;
            float: left;
        }

        /*中间部分*/
        .nr ul {
            font-size: .3rem;
            line-height: .8rem;
            color: #000;
        }

        .nr ul li {
            text-align: left;
            width: 96%;
            margin: 0 auto;
            background: #fff;
            padding: 0 2%;
            font-size: .3rem;
            border-bottom: .1rem solid #efefef;
        }

        .nr .li_one {
            height: 5rem;
            position: relative;
            border-bottom: .1rem solid #efefef;
        }

        .nr .li_one .name {
            font-weight: bold;
            font-size: .9rem;
            position: absolute;
            top: 1rem;
            left: 5.5rem;
        }

        .nr .li_one .tp {
            position: absolute;
            top: 2.2rem;
            left: 5.5rem;
        }

        .nr .li_one .tp1 {
            position: absolute;
            top: 3.3rem;
            left: 5.5rem;
        }

        .nr .li_two {
            margin-top: 1.5rem;
            height: 3rem;
            line-height: 3rem;
            vertical-align: super;
            border-bottom: .1rem solid #efefef;
        }

        .nr .li_two .text_two {
            width: 100%;
            height: 100%;
            display: block;
            text-decoration: none;
            outline: none;
            background: url("__PUBLIC__/Api/images/xing.jpg") no-repeat 0rem 0rem;
            background-size: 2rem;
            background-position: 0rem;
        }

        .nr .li_two .text_two p {
            color: black;
            font-size: 1rem;
            display: inline-block;
            margin-left: 2.5rem;
        }

        .nr .li_two .text_two span {
            color: #9a9a9a;
            float: right;
            margin-right: 1.6rem;
            display: block;
        }

        .nr .li_three {
            height: 3rem;
            line-height: 3rem;
            vertical-align: super;
            border-bottom: .1rem solid #0000000a;
        }

        .nr .li_three .text_two {
            width: 100%;
            height: 100%;
            display: block;
            text-decoration: none;
            outline: none;
            background: url("__PUBLIC__/Api/images/xing.jpg") no-repeat 0rem 0rem;
            background-size: 2rem;
            background-position: 0rem;
        }

        .nr .li_three .text_two p {
            color: black;
            font-size: 1rem;
            display: inline-block;
            margin-left: 2.5rem;
        }

        .nr .li_three .text_two span {
            color: #9a9a9a;
            float: right;
            margin-right: 1.6rem;
            display: block;
        }

        .nr .li_four {
            margin-top: 2rem;
            height: 3rem;
            line-height: 3rem;
            vertical-align: super;
            border-bottom: .1rem solid #0000000a;
        }

        .nr .li_four .text_two {
            width: 100%;
            height: 100%;
            display: block;
            text-decoration: none;
            outline: none;
            background: url("__PUBLIC__/Api/images/xing.jpg") no-repeat 0rem 0rem;
            background-size: 2rem;
            background-position: 0rem;
        }

        .nr .li_four .text_two p {
            color: black;
            font-size: 1rem;
            display: inline-block;
            margin-left: 2.5rem;
        }

        .nr .li_four .text_two span {
            color: #9a9a9a;
            float: right;
            margin-top: 2rem;
            margin-right: 6rem;
            display: block;
        }


    </style>
</head>
<body>
<div class="table_body">
    <!-- 头部 -->
    <!-- <div class="hide">
      <span style="margin-left: 2rem">我的</span>
  <a href="../My/Setup.html">
      <span>设置</span>
  </a>
 </div> -->
    <div class="header flex flex-ver">
        <div class="flex flex-center flex-1 oy-header-title">个人中心</div>
        <!--<a href="NewFriends.html" class="oy-header-right-img">-->
            <!--<img class="oy-header-img" src="__PUBLIC__/Api/images/Friends.png">-->
        <!--</a>-->
    </div>
    <!-- 中间部分 -->
    <div class="nr">
        <ul>
            <li class="li_one">
                <a style="color: black;display: block;" href="../My/information.html">
                    <img src="<?php echo $list['headimgurl']?>" alt="" style="width: 15%;padding-left: 2%;padding-top: 3%;">
                    <span class="name"><?php echo $list['nickname']?></span>
                    <p class="tp"><?php echo $list['sex']?></p>
                    <p class="tp1">
                        <img src="__PUBLIC__/Api/images/xing.jpg" alt="" style="width: 1.3rem;">
                        <span  style="vertical-align: super;color: #9c9c9c">等级</span>
                    </p>
                    <i class="iconfont" style="float: right;font-size: 1.5rem;margin-top: 2rem;color: #777;">&#xe6a7;</i>
                </a>
            </li>

            <li class="li_two">
                <a href="javscript:;" class="text_two">
                    <p>阅读记录</p>

                    <i class="iconfont" style="float: right;font-size: 1.4rem;margin-right: -3.8rem;color: #777;">&#xe6a7;</i>
                </a>
            </li>

        </ul>
    </div>


    <!-- 底部 -->
    <div class="footer">

        <a href="../News/news.html" class="footer__item" style="margin-left: 20px;">
            <div class="footer__icon">
                <img src="__PUBLIC__/Api/images/Newsfoot.png" alt="">
            </div>
            <p class="footer__label">首页</p>
        </a>


        <a href="javascript:;" class="footer__item" style="margin-left: 150px;">
            <div class="footer__icon">
                <img src="__PUBLIC__/Api/images/My1.png" alt="">
            </div>
            <p style="color:#c82226;" class="footer__label">我的</p>
        </a>
    </div>
</div>
</body>
</html>